<template>
  <view>
    <view class="text-row">
      <span>执照信息已安全加密，实时保障信息安全</span>
      <p>温馨提示：单位执照信息30天内仅允许修改2次</p>
    </view>
    <view class="img-load">
      <img :src="licenseImg" alt="" @click="previewPic">
    </view>
    <view style="text-align: center;">
      执照过期时间：{{ validDate }}
      <span v-if="validDateIsOut" @click="changeAvatar" class="color-text errorColor">执照已过期，点击修改</span>
      <span v-if="!validDateIsOut" @click="changeAvatar" class="color-text themeColor">执照有效，点击修改</span>
    </view>
  </view>
</template>

<script>
import {getToken} from '@/utils/auth'
import config from '@/config'
import {isOutDate} from "@/utils/ruoyi";
import {getInfoByCompanyIdAndOss} from "@/api/ec/work/company/companyCertification";

export default {
  data() {
    return {
      // host地址
      host: config.baseUrl,
      // 企业信息
      companyInfo: this.$store.getters.companyInfo,
      // 过期时间
      validDate: '',
      // 营业执照是否过期
      validDateIsOut: null,
      // 营业执照
      licenseImg: require('@/static/images/license.png'),
    }
  },
  onLoad(option) {
    // 执照过期时间
    this.validDate = option.validDate
    // 单位执照是否过期
    this.validDateIsOut = isOutDate(this.validDate);
    this.bindingRefreshData();
  },
  onUnload() {
    this.unbindingRefreshData();
  },
  created() {
    this.getInfo()
  },
  methods: {
    /** 绑定 */
    bindingRefreshData() {
      // 头像图片剪切成功
      uni.$on('credentialPreviewCropperSuccess', (base64, type) => {
        this.cropperSuccess(base64, type);
      });
    },
    /** 解除绑定 */
    unbindingRefreshData() {
      uni.$off('credentialPreviewCropperSuccess');
    },
    /**获取营业执照信息*/
    getInfo() {
      this.$modal.loading();
      // 获取认证信息
      getInfoByCompanyIdAndOss(this.companyInfo.id).then((response) => {
        uni.hideLoading()
        this.licenseImg = "data:image/png;base64," + response.data.imgPath;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 预览图片 */
    previewPic() {
      uni.previewImage({urls: [this.licenseImg], current: 0});
    },
    // =================================================================================================================
    // ==== 修改头像
    // =================================================================================================================
    /** 修改头像 */
    changeAvatar() {
      uni.navigateTo({url: "/pages/common/imageCropper/index?callbackMethod=credentialPreviewCropperSuccess&width=1600&height=1167&imageSrc=" + encodeURIComponent(this.licenseImg)});
    },
    /** 用户头像图片剪切成功回调方法，上传头像 */
    cropperSuccess(base64, type) {
      // Base64字符串转二进制流
      let arrayBuffer = uni.base64ToArrayBuffer(base64.replace(/^data:image\/\w+;base64,/, ""))
      // 二进制流转blob
      let blob = new Blob([arrayBuffer], {type: "image/png"});
      setTimeout(() => {
        this.$modal.loading();
        uni.uploadFile({
          url: this.host + "/ec/certification/updateCompanyCertificationImgPath",
          file: blob,
          header: {'Authorization': 'Bearer ' + getToken(),},
          name: 'file',
          formData: {'companyId': this.companyInfo.id},
          success: (res) => {
            uni.hideLoading();
            let data = JSON.parse(res.data);
            if (data.code == 200) {
              this.licenseImg = base64;
              this.validDate = res.data.validDate;
              this.validDateIsOut = isOutDate(this.validDate);
              uni.showToast({title: "修改成功", icon: 'success'});
              // 延迟500毫秒显示效果
              setTimeout(() => {
                this.getInfo();
              }, 500);
            } else {
              this.$modal.msgError(data.msg);
            }
          },
          complete: () => {
            uni.hideLoading();
          }
        });
      }, 100);
    },
  }
}
</script>

<style scoped lang="scss">
.img-load {
  text-align: center;
  margin: 30rpx;

  img {
    border: 1rpx dashed #ccc;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 8rpx;
    border-radius: 10rpx;
  }
}

.color-text {
  margin-left: 20rpx;
}

.text-row {
  text-align: center;
  margin: 26rpx 0;

  p {
    color: $uni-color-primary;
    margin: 10rpx 0;
  }
}

page {
  background: $uni-bg-color;
}
</style>
